<script setup lang="ts">
import { AreaList } from '@/apis/card';
import type { areaRow, CarRuleParams } from '@/types/card';
import { onMounted, ref } from 'vue';

const areaParams=ref<CarRuleParams>({
  page:1,
  pageSize:5
})
const total=ref(0)
const areaList=ref<areaRow[]>([])
const getareaList=async ()=>{
const res=await AreaList(areaParams.value)
console.log('res',res);
areaList.value=res.data.rows as areaRow[]
total.value=res.data.total as number
}
onMounted(()=>{
  getareaList()
})
const dialogVisible=ref(false)
</script>

<template>
  <div class="car-area-page" style="padding: 20px;">
    <el-button type="primary" style="margin-bottom:20px ;" @click="dialogVisible=true">添加区域</el-button>
    <el-table :data="areaList">
      <!-- 序号	区域名称	车位数（个）	面积（㎡）	计费规则	备注	操作 -->
      <el-table-column label="序号" prop="id"></el-table-column>
      <el-table-column label="区域名称" prop="areaName"></el-table-column>
      <el-table-column label="车位数（个）" prop="spaceNumber"></el-table-column>
      <el-table-column label="面积（㎡）" prop="areaProportion"></el-table-column>
      <el-table-column label="计费规则" prop="hoverRuleName"></el-table-column>
      <el-table-column label="备注" prop="remark"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" text>编辑</el-button>
          <el-button type="primary"text >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :total="total"
      :page-sizes="[2, 3, 4, 5]"
      layout="total,sizes, prev, pager, next,jumper"
      v-model:current-page="areaParams.page"
      v-model:page-size="areaParams.pageSize"
      @change="getareaList"
    />

  </div>
  <el-dialog  title="添加楼宇" width="600"  v-model="dialogVisible">
    <el-form label-position="top" style="width: 300px;margin-left: 70px;">
      <el-form-item label="楼宇名称" prop="name" >
        <el-input placeholder="请输入楼宇名称" />
      </el-form-item>
      <el-form-item label="楼宇层数" prop="floors" >
        <el-input placeholder="请输入楼宇层数" />
      </el-form-item>
      <el-form-item label="在管面积" prop="area">
        <el-input placeholder="请输入在管面积" />
      </el-form-item>
      <el-form-item label="物业费" prop="propertyFeePrice" >
        <el-input placeholder="请输入物业费"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer" >
        <el-button >取消</el-button>
        <el-button type="primary">添加</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped></style>
